import React, { useCallback, useState, useMemo} from 'react';
import Header from '@/component/layout/Header/Header';
import MemoList from './MemoList';
import { Link } from 'react-router-dom';
import ListTitle from "@/component/layout/ListTitle/ListTitle";
import { DatePicker, List } from 'antd-mobile';
import moment from 'moment';

import './style.less';

const img1 = <img src={require('../../assests/img/add.png')} alt="" />
const pageSize = 20;


let time = new Date();
let startTime = moment().startOf('day').valueOf();
let endTime = moment().endOf('day').valueOf();


// startTime: 1591113600000
// endTime: 1591199999999
// const endTime = moment().add(12, 'months').valueOf();

const Memo = (props) => {

  const [param, setParam] = useState({ pageIndex: 1, pageSize, startTime, endTime })

  const [date1, setDate1] = useState(time)

  const update = useCallback(() => {
    setParam({ ...param, pageIndex: param.pageIndex + 1 })
  }, [param])


  const changeTime = useCallback((e) => {
    let start = moment(+e).startOf('day').valueOf();
    let end = moment(+e).endOf('day').valueOf();
    time = e;
    startTime = start;
    endTime = end;
    setDate1(e);
    setParam({ ...param, pageIndex: 1, startTime: start, endTime: end })
  }, [param])

  const refresh = useCallback(() => {
    setParam({ ...param })
  }, [param])



  return (
    <>
      <Header center={<span>个人中心</span>} />
      <div className="global-content Memo-box">
        <div className="Memo-box-tab">
          <ListTitle img={img1} text={<Link to="/memoDetail">新建计划</Link>} />
          {/* <Link>查看销售每日工作计划</Link> */}
          <DatePicker
            mode="date"
            title="选择时间"
            extra="Optional"
            value={date1}
            onChange={changeTime}
          >
            <List.Item className="date-a" arrow="horizontal"></List.Item>
          </DatePicker>
        </div>
        <MemoList refresh={refresh} update={update} param={param} />
      </div>
    </>
  )
}


export default Memo 